<template>
  <main class="container">
    <wave-loading v-if="loading" info="数据加载中"></wave-loading>

    <card v-if="active!==null"></card>
    <div class="main">
      <div class="tab-container">
        <div class="tabs">
          <div class="tab" v-for="(tab,index) in tabs" :class="{'active':index===activeIndex}"
               @click="changeTab(index)">
            {{ tab }}
          </div>
          <search style="margin-left: 50px"></search>
        </div>
        <div class="tab-content">
          <div :style="{display: activeIndex===0?'block':'none'}">
            <div>
              <wave-map-loading v-if="mapLoading"></wave-map-loading>
              <map-view></map-view>
            </div>
          </div>
          <div :style="{display: activeIndex===1?'block':'none'}">
            <div class="content-china-info">
              <wave-map-loading v-if="chinaLoading"></wave-map-loading>
              <china-chart></china-chart>
            </div>
          </div>
          <div :style="{display: activeIndex===2?'block':'none'}">
            <div class="content-china-info">
              <wave-map-loading v-if="provinceLoading"></wave-map-loading>
              <all-provinces-chart></all-provinces-chart>
            </div>
          </div>
          <div :style="{display: activeIndex===3?'block':'none'}">
            <div class="content-setting" v-if="activeIndex===3">
              <setting></setting>
            </div>
          </div>


        </div>
      </div>
      <div class="report-list">
        <h2>查询记录</h2>
        <virtual-list
            style="height: 600px; overflow-y: auto"
            scrollable
            :data-key="'areaCode'"
            :data-sources="reports"
            :data-component="itemComponent"
        />
      </div>
    </div>

  </main>
</template>

<script>
import MapView from "@/views/MapView";
import ReportCell from "@/components/ReportCell";
import {mapState} from "vuex";
import VirtualList from "vue-virtual-scroll-list";
import Card from "@/components/Card";
import Setting from "@/views/Setting";
import ChinaChart from "@/components/echart/chinaChart";
import WaveLoading from "@/components/WaveLoading";
import WaveMapLoading from "@/components/WaveLoadingMap";
import Search from "@/components/Search";
import AllProvincesChart from "@/components/echart/allProvinceChart";

export default {
  name: "Index",
  components: {AllProvincesChart, Search, WaveMapLoading, WaveLoading, ChinaChart, Setting, Card, ReportCell, MapView},
  data() {
    return {
      itemComponent: ReportCell,
      activeIndex: 0,
      tabs: ['大地图', '全国信息', '全省信息', '更多功能']
    }
  },
  computed: {
    ...mapState(['reports', 'active', 'loading', 'mapLoading', 'provinceLoading', 'chinaLoading'])
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index;

    }
  },
  mounted() {
  }
}
</script>

<style lang="less">
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;
  overflow: auto;
}

.tab-container {
  padding: 24px;
  width: 900px;
  height: 700px;
}

/* report */
.report-list {
  margin-left: 10px;
  margin-right: 10px;
  width: 260px;
  min-width: 260px;
  padding: 20px;
  margin-top: 10px;
  height: 700px;
  border-radius: 16px;
  background: var(--background-color);
  box-shadow: var(--box-shadow);
}

/* tab */
.tabs {
  padding: 4px;
  border-radius: 5px;
  background: var(--background-color);
  box-shadow: var(--box-shadow);
  display: flex;
}

.tab {
  padding: 12px 36px;
  cursor: pointer;
  transition: 0.3s;
}

.tab.active {
  border-radius: 5px;
  background: var(--background-active-color);
  box-shadow: var(--box-active-shadow);
  color: var(--font-active-color);
}

/* content */
.tab-content {
  overflow: hidden;
  margin-top: 36px;
  padding: 36px;
  height: 570px;
  border-radius: 16px;
  background: var(--background-color);
  box-shadow: var(--box-shadow);
}

.tab-content > div {
  animation: fadeIn 1.3s;
}

.tab-content h2 {
  font-weight: 400;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 838px) {
  .tab-container {
    width: 100%;
  }
}

@media (min-width: 375px) and (max-width: 418px) {
  .tab {
    padding: 12px 24px;
  }
}

.content-setting {
}

.content-china-info {
  background-color: var(--background-info-color);
  //box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
}

.tab-content h2 {
  margin-top: -10px;
}

.search {
  text-align: center;
  color: #2c3e50;

}


</style>